<template>
  <div class="page-header" @click="goHome" v-if="!login">
    <img src="../assets/2de0a0aed8c056d27f6076574092ce6.png" />
  </div>
  <header class="header" v-else>
    <div class="logo" @click="goHome">
      <img src="@/assets/2de0a0aed8c056d27f6076574092ce6.png" alt="logo" />
    </div>
    <div class="user-info">
      <span
        >{{
          (userInfo && userInfo.name) || (userInfo && userInfo.enterprise)
        }}，您好！</span
      >
      <el-link type="primary" @click="signOut">退出账号 ></el-link>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from "vue-router";
const props = defineProps({
  login: {
    type: String,
    required: false,
  },
});
const userInfo = computed(
  () =>
    JSON.parse(localStorage.getItem("judgeInfo")) ||
    JSON.parse(localStorage.getItem("supplierInfo")) ||
    {}
);
const router = useRouter();
const goHome = () => {
  router.push({
    path: "/index",
  });
};
const signOut = () => {
  window.location.replace("/");
  localStorage.clear();
};
</script>

<style lang="scss" scoped>
.page-header {
  height: 56px;
  background: #fff;
  padding-left: 12%;
  cursor: pointer;
  img {
    height: 100%;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  height: 55px;
  border-bottom: 1px solid #eee;

  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      height: 56px;
      margin-right: 8px;
    }

    span {
      font-size: 20px;
      font-weight: bold;
    }
  }

  .user-info {
    display: flex;
    align-items: center;

    span {
      margin-right: 16px;
    }
  }
}
</style>
